﻿@using FH.Application.PorductApp.Dtos
@using FH.Application.NewsApp.Dtos
@using FH.Core
@using FH.Application.BannerApp.Dtos
@using FH.Core.Entities
@{
    ViewData["Title"] = "首页";
    Layout = null;
    List<CategoryDto> categoryDtos = ViewBag.Categorys as List<CategoryDto>;
    List<ProductDto> productDtos = ViewBag.Products as List<ProductDto>;
    List<NewsDto> news = ViewBag.News as List<NewsDto>;
    AppConfig config = ViewBag.AppConfig as AppConfig;
    List<BannerDto> banners = ViewBag.Banners as List<BannerDto>;
    List<CustomerDto> customers = ViewBag.Customer as List<CustomerDto>;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] @config.SiteName</title>

    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/style.css" />
    <link href="~/css/jquery.bxslider.css" rel="stylesheet" />
    <style type="text/css">
        .header {
            background: #cd3c32;
            color: #fff;
            padding-top:6px;
            padding-bottom:6px;
        }

        .logo h1 a {
            color: #fff;
        }

        .demo-4.active {
            border-bottom: 1px solid #fff;
        }
        /*
        ================================
        Bx Slider
        ================================
        */

        .main-slider {
            width: 100%;
            height: auto;
            position: relative;
            z-index: 99;
        }

        .slider ul li {
            width: 100%;
            height: 530px;
            background-repeat: no-repeat;
            -webkit-background-size: cover;
            background-size: cover;
            background-position: top center;
        }

            .slider ul li .overlay {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: #353535;
                opacity: 0.5;
                filter: alpha(opacity=50);
                z-index: 99;
            }

            .slider ul li .content {
                max-width: 1170px;
                position: relative;
                margin: 0 auto;
                text-align: center;
                padding-top: 40px;
            }

            .slider ul li .inner {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 999;
            }

        .slider h2 {
            font-family: 'Montserrat', sans-serif;
            color: #ffffff;
            text-transform: uppercase;
            font-weight: bold;
            font-size: 50px;
            margin-bottom: 20px;
            margin-top: 140px;
        }

        .slider h3 {
            font-family: 'Montserrat', sans-serif;
            color: #fff;
            text-transform: uppercase;
            font-weight: normal;
            font-size: 28px;
            margin-bottom: 10px;
            background: #353535;
            opacity: 0.8;
            filter: alpha(opacity=80);
            padding: 20px;
            display: inline-block;
            border-radius: 8px;
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
        }

        .slider p {
            font-family: 'Montserrat', sans-serif;
            color: #fff;
            font-size: 20px;
        }

            .slider p.button {
                overflow: hidden;
                margin-top: 10px;
            }

                .slider p.button a {
                    font-size: 16px;
                    -webkit-transition: all 0.4s ease 0s;
                    -moz-transition: all 0.4s ease 0s;
                    -o-transition: all 0.4s ease 0s;
                    transition: all 0.4s ease 0s;
                    color: #ffffff;
                    background: #f57c05;
                    padding: 10px 20px;
                    border-radius: 8px;
                    -webkit-border-radius: 8px;
                    -moz-border-radius: 8px;
                    text-transform: uppercase;
                }

                    .slider p.button a:hover {
                        opacity: 0.9;
                        filter: alpha(opacity=90);
                    }

        .bx-wrapper .bx-viewport {
            left: 0;
            border: 0 !important;
            box-shadow: none !important;
        }

        .service-v1 {
            padding-bottom: 20px;
            background-image: url('/images/d763.jpg');
            background-color: rgb(9, 14, 20);
            /*height: 580px;*/
            background-position: center center;
            background-repeat: no-repeat;
        }

        .wp-title_content {
            word-wrap: break-word;
            padding: 0px;
            margin: 0 auto;
            display: block;
        }
        /*.worksbox {
            padding-bottom: 120px;
        }*/
        .worksbox a {
            border-style: none;
            background-color: none;
            padding: 3px;
            display: block;
        }

        p.phbox {
            width: 37px;
            height: 37px;
            position: relative;
            overflow: hidden;
            margin: 0 auto;
        }

        .worksbox a img {
            width: 80px;
            height: 68px;
        }

        p.phbox img.phfront {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 2;
        }

        p.phbox img.phback {
            height: 0px;
            z-index: 1;
            position: absolute;
            left: 0;
            top: 34px;
        }

        .button_btndefault-link {
            text-align: center;
            display: block;
            margin-top: 20px;
            font-family: Microsoft YaHei;
            font-size: 14px;
            font-weight: normal;
            color: #fff;
        }

        A.button_btndefault-link:visited {
            text-decoration: none;
            color: #fff;
        }

        A.button_btndefault-link:link {
            text-decoration: none;
            color: #fff;
        }

        .itembox {
            margin-top: 10px;
        }

            .itembox.border {
                border-right: 1px solid #fff;
            }

        .navigation, .navigation ul, .navigation li {
            list-style-type: none;
            margin: 0px;
            padding: 0px;
            border: thin none;
        }

        .navigation {
            position: relative;
            max-width: 918px;
            margin: 0 auto;
            height: 54px;
            line-height: 54px;
            margin-bottom: 10px;
        }

            .navigation li.wp_subtop {
                border: 1px solid #999;
                text-align: center;
                position: relative;
                float: left;
                padding-bottom: 0px;
                height: 54px;
                margin-right: 20px;
                margin-left: 20px;
                cursor: pointer;
            }

                

                .navigation li.wp_subtop > a {
                    white-space: nowrap;
                    display: block;
                    padding: 0 10px;
                    text-decoration: none;
                    font-size: 12px;
                    font-family: arial;
                    color: #ffffff;
                    text-align: center;
                    font-weight: normal;
                    font-style: normal;
                    overflow: hidden;
                }

                    .navigation li.wp_subtop > a:hover, .navigation li.active > a {
                        font-size: 12px;
                        font-family: arial;
                        color: #fff!important;
                        background-color:#cd3c32;
                        text-align: center;
                        font-weight: normal;
                        font-style: normal;
                    }

            .navigation ul {
                position: absolute;
                left: 0px;
                display: none;
                padding-left: 5px;
                padding-right: 5px;
                background-image: url(http://static.websiteonline.cn/website/plugin/new_navigation/view/images/png_bg.png);
                background-color: transparent;
                margin-left: 0px;
                padding-top: 10px;
                padding-bottom: 8px;
            }

                .navigation ul li {
                    position: relative;
                    text-align: center;
                    padding-bottom: 0px;
                    padding-left: 5px;
                    padding-right: 5px;
                    height: 31px;
                    line-height: 31px;
                    background-image: url(http://static.websiteonline.cn/website/plugin/new_navigation/view/images/png_bg.png);
                    background-repeat: repeat;
                    background-position: top left;
                    background-color: #516c47;
                }

                    .navigation ul li:hover {
                        height: 31px;
                        text-align: center;
                        line-height: 31px;
                        padding-left: 5px;
                        padding-right: 5px;
                        background-repeat: repeat;
                        background-position: top left;
                        background-color: #3a4c34;
                    }

                    .navigation ul li a {
                        display: block;
                        font-size: 12px;
                        font-family: arial;
                        color: #fff;
                        text-align: center;
                        font-weight: normal;
                        font-style: normal;
                        white-space: nowrap;
                    }

                        .navigation ul li a:hover {
                            display: block;
                            font-size: 12px;
                            font-family: arial;
                            color: #ffffff;
                            text-align: center;
                            font-weight: normal;
                            font-style: normal;
                        }

        .navigation {
            height: 46px;
        }

        .navigation {
            background-position: center center;
        }

            .navigation li.wp_subtop {
                line-height: 46px;
            }

            .navigation li.wp_subtop {
                height: 46px;
            }

                .navigation li.wp_subtop > a {
                    font-family: Microsoft YaHei;
                }

                .navigation li.wp_subtop > a {
                    font-size: 14px;
                }

                .navigation li.wp_subtop > a {
                    color: #434343;
                }

            .navigation li.wp_subtop {
                background-position: center center;
            }

                .navigation li.wp_subtop:hover {
                    line-height: 46px;
                }

                .navigation li.wp_subtop:hover {
                    height: 46px;
                }

                .navigation li.wp_subtop > a:hover {
                    font-size: 14px;
                }

                .navigation li.wp_subtop > a:hover {
                    font-family: Microsoft YaHei;
                }

                /*.navigation li.wp_subtop {
                width: 150px;
            }

                .navigation li.wp_subtop:hover {
                    width: 150px;
                }*/

                .navigation li.wp_subtop:hover {
                    background-color: transparent;
                }

                .navigation li.wp_subtop:hover {
                    
                }

              

        .aeffect {
            width: 100%;
            display: block;
            max-height: 350px;
        }

        .product-list .item {
            padding: 20px 10px 20px 0;
        }

        .aeffect > img {
            width: 100%;
            max-height: 350px;
        }

        .product-list .title {
            display: block;
            text-align: center;
            font-family: Microsoft YaHei;
            font-size: 14px;
            font-weight: bold;
            line-height: 140%;
            color: #333;
            padding: 8px;
        }
        /*layer4A5CD4574A92184AAFB852EAEAE84872*/
        #layer4A5CD4574A92184AAFB852EAEAE84872 a.button_btndefault-link {
            height: 50px;
            line-height: 50px;
            position: absolute;
            background-color: rgb(255,153,0);
            cursor: pointer;
            display: inline-block;
            text-align: center;
            width: 100%;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            border-radius: 3px;
            -moz-transition: border-color 0.4s ease 0s,background-color 0.4s ease 0s;
            -webkit-transition: border-color 0.4s ease 0s,background-color 0.4s ease 0s;
            -o-transition: border-color 0.4s ease 0s,background-color 0.4s ease 0s;
            transition: border-color 0.4s ease 0s,background-color 0.4s ease 0s;
            -moz-box-shadow: rgba(0,0,0,0.6) 1px 1px 4px 0px;
            -webkit-box-shadow: rgba(0,0,0,0.6) 1px 1px 4px 0px;
            box-shadow: rgba(0,0,0,0.6) 1px 1px 4px 0px;
            border: 0px solid rgb(255,87,0);
        }

            #layer4A5CD4574A92184AAFB852EAEAE84872 a.button_btndefault-link:hover {
                background-color: rgb(255,102,0);
                border-color: rgb(255,87,0);
                -moz-transition: border-color 0.4s ease 0s,background-color 0.4s ease 0s;
                -webkit-transition: border-color 0.4s ease 0s,background-color 0.4s ease 0s;
                -o-transition: border-color 0.4s ease 0s,background-color 0.4s ease 0s;
                transition: border-color 0.4s ease 0s,background-color 0.4s ease 0s;
            }

        #layer4A5CD4574A92184AAFB852EAEAE84872 a span.button_btndefault-label {
            color: rgb(255,255,255);
            font-weight: bold;
            -moz-transition: color 0.4s ease 0s;
            -webkit-transition: color 0.4s ease 0s;
            -o-transition: color 0.4s ease 0s;
            transition: color 0.4s ease 0s;
            white-space: nowrap;
        }

        #layer4A5CD4574A92184AAFB852EAEAE84872 a:hover span.button_btndefault-label {
            color: rgb(255,255,255);
            -moz-transition: color 0.4s ease 0s;
            -webkit-transition: color 0.4s ease 0s;
            -o-transition: color 0.4s ease 0s;
            transition: color 0.4s ease 0s;
        }

        #layer4A5CD4574A92184AAFB852EAEAE84872 a.btnarea {
            background-color: transparent;
        }

            #layer4A5CD4574A92184AAFB852EAEAE84872 a.btnarea span {
                font-family: Microsoft YaHei;
                font-size: 14px;
                font-weight: normal;
            }

            #layer4A5CD4574A92184AAFB852EAEAE84872 a.btnarea:hover {
                background-color: rgba(255,255,255,1);
                background-image: none;
            }

                #layer4A5CD4574A92184AAFB852EAEAE84872 a.btnarea:hover span {
                    color: rgba(218,36,24,1);
                }

        #layer4A5CD4574A92184AAFB852EAEAE84872 a.btnarea {
            -moz-box-shadow: none;
            -webkit-box-shadow: none;
            box-shadow: none;
        }

        #layer4A5CD4574A92184AAFB852EAEAE84872 a.btnarea {
            border-color: rgba(255,255,255,1);
        }

            #layer4A5CD4574A92184AAFB852EAEAE84872 a.btnarea:hover {
                border-color: rgba(255,255,255,1);
            }

        #layer4A5CD4574A92184AAFB852EAEAE84872 a.btnarea {
            border-width: 1px;
        }

        #layer4A5CD4574A92184AAFB852EAEAE84872 a.btnarea {
            -moz-border-radius: 0px 0px 0px 0px;
            -webkit-border-radius: 0px 0px 0px 0px;
            border-radius: 0px 0px 0px 0px;
        }
        /*layer0EDF9D34AFE3A8BA4B4BF23B1ED32654*/
        .article_list-layer0EDF9D34AFE3A8BA4B4BF23B1ED32654 li {
            overflow: hidden;
            margin: 10px 0;
            padding-bottom: 15px;
            list-style: none;
            border-bottom: 1px dotted #dbd4cd;
            list-style: none;
        }

        .article_list-layer0EDF9D34AFE3A8BA4B4BF23B1ED32654 .time {
            background: #198ede;
            width: 60px;
            float: left;
            text-align: center;
            margin-left: 30px;
            color: #fff;
        }

        .article_list-layer0EDF9D34AFE3A8BA4B4BF23B1ED32654 .conts {
            margin-left: 130px;
        }

        .article_list-layer0EDF9D34AFE3A8BA4B4BF23B1ED32654 #day {
            /*border-bottom:#36a2eb 1px solid;*/
            height: 41px;
            line-height: 41px;
            font-size: 24px;
            color: #fff;
        }

        .article_list-layer0EDF9D34AFE3A8BA4B4BF23B1ED32654 .date {
            display: block;
            height: 18px;
            line-height: 18px;
            font-size: 13px;
        }

        .article_list-layer0EDF9D34AFE3A8BA4B4BF23B1ED32654 h3 {
            margin: 0px;
            padding: 0px;
        }

            .article_list-layer0EDF9D34AFE3A8BA4B4BF23B1ED32654 h3 a {
                font-size: 16px;
                color: #333333;
                font-weight: bold;
                overflow: hidden;
            }

        .article_list-layer0EDF9D34AFE3A8BA4B4BF23B1ED32654 .conts p {
            color: #999;
            font-size: 14px;
            line-height: 18px;
            text-align: left;
        }

            .article_list-layer0EDF9D34AFE3A8BA4B4BF23B1ED32654 .conts p a {
                color: #999;
                font-size: 12px;
            }

                .article_list-layer0EDF9D34AFE3A8BA4B4BF23B1ED32654 .conts p a:hover {
                    color: #198ede;
                }

            .article_list-layer0EDF9D34AFE3A8BA4B4BF23B1ED32654 .conts p.abstract {
                width: 100%;
                overflow: hidden;
                word-wrap: break-word;
            }

        .article_list-layer0EDF9D34AFE3A8BA4B4BF23B1ED32654 div.wp-new-article-style-01-left {
            margin-right: 8px;
        }

        .article_list-layer0EDF9D34AFE3A8BA4B4BF23B1ED32654 div.conts {
            margin-left: 125px;
        }

        #layer0EDF9D34AFE3A8BA4B4BF23B1ED32654 .article_list-layer0EDF9D34AFE3A8BA4B4BF23B1ED32654 h1.title_text > a:hover {
            color: #5A5A5A;
            line-height: 140%;
        }

        .article_list-layer0EDF9D34AFE3A8BA4B4BF23B1ED32654 h1.title_text > a {
            display: inline-block;
            font-family: SimSun;
            font-size: 18px;
            color: #048bcd;
            font-weight: normal;
            text-decoration: none;
            line-height: 140%;
        }

        .article_list-layer0EDF9D34AFE3A8BA4B4BF23B1ED32654 p.title_text1 {
            display: inline-block;
            font-family: SimSun;
            font-size: 12px;
            color: #7D7D7D;
            font-weight: normal;
            text-decoration: none;
            line-height: 140%;
        }

        .article_list-layer0EDF9D34AFE3A8BA4B4BF23B1ED32654 p.abstractd {
            display: block;
            font-family: SimSun;
            font-size: 12px;
            color: #7D7D7D;
            font-weight: normal;
            text-decoration: none;
            line-height: 140%;
        }

        #layer0EDF9D34AFE3A8BA4B4BF23B1ED32654 .article_list-layer0EDF9D34AFE3A8BA4B4BF23B1ED32654 a.artdetialtips {
            display: inline-block;
            font-family: SimSun;
            font-size: 12px;
            color: #CF0202;
            font-weight: normal;
            text-decoration: none;
            line-height: 140%;
        }

            #layer0EDF9D34AFE3A8BA4B4BF23B1ED32654 .article_list-layer0EDF9D34AFE3A8BA4B4BF23B1ED32654 a.artdetialtips:hover {
                color: #ff0000;
            }

        #layer0EDF9D34AFE3A8BA4B4BF23B1ED32654 .article_list-layer0EDF9D34AFE3A8BA4B4BF23B1ED32654 p.title > a:hover {
            color: #da2418;
            line-height: 140%;
        }

        #layer0EDF9D34AFE3A8BA4B4BF23B1ED32654 .article_list-layer0EDF9D34AFE3A8BA4B4BF23B1ED32654 p.title > a {
            display: inline-block;
            font-family: Microsoft YaHei;
            font-size: 16px;
            color: #434343;
            font-weight: bold;
            text-decoration: none;
            line-height: 140%;
        }

        .article_list-layer0EDF9D34AFE3A8BA4B4BF23B1ED32654 span.category > a {
            display: inline-block;
            font-family: SimSun;
            font-size: 12px;
            color: #0064D4;
            font-weight: normal;
            text-decoration: none;
            line-height: 140%;
        }

            .article_list-layer0EDF9D34AFE3A8BA4B4BF23B1ED32654 span.category > a:visited {
                display: inline-block;
                font-family: SimSun;
                font-size: 12px;
                color: #0064D4;
                font-weight: normal;
                text-decoration: none;
            }

        #layer0EDF9D34AFE3A8BA4B4BF23B1ED32654 .wpart-border-line .time {
            width: 80px;
        }

        #layer0EDF9D34AFE3A8BA4B4BF23B1ED32654 .wpart-border-line .time {
            height: 80px;
        }

        #layer0EDF9D34AFE3A8BA4B4BF23B1ED32654 .wpart-border-line .date {
            text-decoration: none;
        }

        #layer0EDF9D34AFE3A8BA4B4BF23B1ED32654 .wpart-border-line .date {
            font-weight: normal;
        }

        .article_list-layer0EDF9D34AFE3A8BA4B4BF23B1ED32654 span.wp-new-ar-pro-time {
            display: inline-block;
            font-family: Microsoft YaHei;
            font-size: 24px;
            padding-top: 6px;
            color: #929292;
            font-weight: bold;
            text-decoration: none;
            line-height: 140%;
        }

        .article_list-layer0EDF9D34AFE3A8BA4B4BF23B1ED32654 .time {
            display: inline-block;
        }

        .article_list-layer0EDF9D34AFE3A8BA4B4BF23B1ED32654 .conts {
            margin-left: 150px;
        }

        .article_list-layer0EDF9D34AFE3A8BA4B4BF23B1ED32654 p.abstract {
            line-height: 140%;
            display: inline-block;
            font-family: Microsoft YaHei;
            font-size: 12px;
            line-height: 16px !important;
            padding-top: 6px;
            color: #5A5A5A;
            font-weight: normal;
            text-decoration: none;
        }

        .article_list-layer0EDF9D34AFE3A8BA4B4BF23B1ED32654 p.link {
            background: none;
        }

        .article_list-layer0EDF9D34AFE3A8BA4B4BF23B1ED32654 .wpart-border-line {
            border-bottom: 0px solid none;
        }

        #layer0EDF9D34AFE3A8BA4B4BF23B1ED32654 .showprec {
            display: inline;
        }

        #layer26B1E350ED70F501FDE14E05056AA2EDmyFocus {
            width: 440px;
            height: 325px;
            margin: 0 auto 10px auto;
        }

        .imgclass {
            width: 100%;
            height: 100%;
        }

        .mF_ladyQ_layer26B1E350ED70F501FDE14E05056AA2EDmyFocus * {
            margin: 0;
            padding: 0;
            border: 0;
            list-style: none;
        }

        .mF_ladyQ_layer26B1E350ED70F501FDE14E05056AA2EDmyFocus {
            position: relative;
            width: 440px;
            height: 325px;
            overflow: hidden;
            font: 12px/1.5 Verdana;
            text-align: left;
            background: #fff;
            visibility: visible !important;
        }

            .mF_ladyQ_layer26B1E350ED70F501FDE14E05056AA2EDmyFocus .pic {
                position: relative;
                width: 440px;
                height: 325px;
                overflow: hidden;
            }

            .mF_ladyQ_layer26B1E350ED70F501FDE14E05056AA2EDmyFocus .txt li {
                width: 440px;
                height: 58px !important;
                overflow: hidden;
            }
        /*=========mF_ladyQ========*/
        .mF_ladyQ {
            position: relative;
        }

            .mF_ladyQ .loading {
                position: absolute;
                width: 100%;
                height: 100%;
                background: #fff url(img/loading.gif) center no-repeat;
                z-index: 9;
            }

            .mF_ladyQ .pic li {
                width: 100%;
                height: 100%;
                overflow: hidden;
                position: absolute;
                display: none;
            }

            .mF_ladyQ .txt li {
                position: absolute;
                z-index: 2;
                left: 0;
                bottom: 28px;
                line-height: 30px;
                font-family: 'å¾®è½¯é›…é»‘';
                visibility: hidden;
                opacity: 0;
            }

                .mF_ladyQ .txt li.current {
                    visibility: visible;
                    opacity: 1;
                    -webkit-transition: all 1s .4s;
                    -moz-transition: all 1s .4s;
                    -o-transition: all 1s .4s;
                }

                .mF_ladyQ .txt li a {
                    display: block;
                    position: relative;
                    z-index: 1;
                    color: #fff;
                    margin-top: 2px;
                    padding-left: 10px;
                    font-size: 16px;
                    text-decoration: none;
                }
                /*æ ‡é¢˜æ ·å¼*/
                .mF_ladyQ .txt li p {
                    position: relative;
                    z-index: 1;
                    padding-left: 11px;
                    line-height: 22px;
                    font-size: 14px;
                    color: #eee;
                }

                .mF_ladyQ .txt li b {
                    display: block;
                    height: 100%;
                    width: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    background: #000;
                    filter: alpha(opacity=40);
                    opacity: 0.4;
                }

            .mF_ladyQ .time_bar {
                position: absolute;
                left: 0;
                height: 20px;
                overflow: hidden;
                background: #444;
            }

            .mF_ladyQ .num {
                position: relative;
                height: 28px;
                background: #000;
                top: -28px;
            }
                /*æŒ‰é’®æ ·å¼*/
                .mF_ladyQ .num ul {
                    position: absolute;
                    right: 6px;
                    top: 4px;
                }

                    .mF_ladyQ .num ul li {
                        float: left;
                        display: inline;
                        margin-left: 3px;
                        width: 20px;
                        height: 20px;
                        line-height: 20px;
                        overflow: hidden;
                        text-align: center;
                        cursor: pointer;
                    }

                        .mF_ladyQ .num ul li a {
                            color: #B1B1B1;
                            display: block;
                            background: #444;
                            text-decoration: none;
                        }

                        .mF_ladyQ .num ul li.current a, .mF_ladyQ .num ul li.hover a {
                            color: #fff;
                            background: #f60;
                            -webkit-transition: all 0.4s;
                            -moz-transition: all 0.4s;
                            -o-transition: all 0.4s;
                        }
        /*layer4A4C40991F8126B88A7F3C0BCB515068*/
        .layer4A4C40991F8126B88A7F3C0BCB515068 p.phbox {
            width: 183px;
            height: 80px;
            position: relative;
            overflow: hidden;
        }

        .layer4A4C40991F8126B88A7F3C0BCB515068 .worksbox {
            width: 183px;
            height: 80px;
            position: relative;
            float: left;
            margin-right: 10px;
            margin-bottom: 20px;
        }

            .layer4A4C40991F8126B88A7F3C0BCB515068 .worksbox.linend {
                padding-right: 0;
            }

            .layer4A4C40991F8126B88A7F3C0BCB515068 .worksbox a {
                border-style: none;
                ;
                background-color: none;
                ;
                padding: 0px;
                display: block;
            }

                .layer4A4C40991F8126B88A7F3C0BCB515068 .worksbox a:hover {
                    border-style: none;
                    ;
                    background-color: none;
                    text-decoration: none;
                }

                .layer4A4C40991F8126B88A7F3C0BCB515068 .worksbox a span {
                    display: none;
                    text-align: center;
                    font-size: px;
                }

                .layer4A4C40991F8126B88A7F3C0BCB515068 .worksbox a:hover span {
                    font-size: 14px;
                    ;
                    display: block;
                    background-color: none;
                    ;
                    width: 183px;
                    position: absolute;
                    bottom: 20px;
                    left: 0px;
                    line-height: 22px;
                    z-index: 5;
                }

                .layer4A4C40991F8126B88A7F3C0BCB515068 .worksbox a img {
                    width: 183px;
                    height: 80px;
                }

        .layer4A4C40991F8126B88A7F3C0BCB515068 p.phbox img.phfront {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 2;
        }

        .layer4A4C40991F8126B88A7F3C0BCB515068 p.phbox img.phback {
            height: 0px;
            z-index: 1;
            position: absolute;
            left: 0;
            top: 40px;
        }
       @@media (max-width:767px){
        .slider ul li {
            height: 240px;
        }
}
    </style>
    <meta name="description" content="@config.SeoDescirpt" />
    <meta name="Keywords" content="@config.SeoKeywords" />
</head>
<body>
    <!--header-->
    <div class="header" id="top">
        <div class="container">
            <nav class="navbar navbar-default">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <div class="navbar-brand logo ">
                        <h1 class="animated wow pulse" data-wow-delay=".5s">

                            <a href="/" class="hidden-sm hidden-xs"><img src="~/images/00.png" style="margin-top: -10px;" /></a>
                            <a href="/" class="hidden-lg hidden-md"><img src="~/images/001.png" style="margin-top: -10px;width:200px;" /></a>
                        </h1>
                    </div>
                    <div class="clearfix"></div>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse nav-wil links" id="bs-example-navbar-collapse-1">
                    <div class="top-nav">
                        <a href="@Url.Action("Index","Home")" class="demo-4  @(Context.Request.Path.HasValue?"":"active")">
                            <span>
                                <span>首页</span>
                                <span>首页</span>
                                <span></span>
                            </span>
                        </a>

                        <a href="@Url.Action("Index","Product")" class="demo-4  @(Context.Request.Path.HasValue&&Context.Request.Path.Value.Contains("Product")?"active":"")">
                            <span>
                                <span>产品中心</span>
                                <span>产品中心</span>
                                <span></span>
                            </span>
                        </a>
                        <a href="@Url.Action("Index","News")" class="demo-4 @(Context.Request.Path.HasValue&&Context.Request.Path.Value.Contains("News")?"active":"")">
                            <span>
                                <span>新闻中心</span>
                                <span>新闻中心</span>
                                <span></span>
                            </span>
                        </a>
                        <a href="@Url.Action("About","Home")" class="demo-4 @(Context.Request.Path.HasValue&&Context.Request.Path.Value.Contains("About")?"active":"")">
                            <span>
                                <span>关于我们</span>
                                <span>关于我们</span>
                                <span></span>
                            </span>
                        </a>
                    </div>
                </div><!-- /.navbar-collapse -->
            </nav>
        </div>
    </div>
    <!-- Slider Start -->
    <section class="main-slider">
        <div class="slider">
            <ul class="bxslider">
                @if (banners != null && banners.Any())
                {
                    foreach (BannerDto item in banners)
                    {
                        <li style="background-image:url(@item.Thumbnail);">
                           
                        </li>

                    }
                }

                @*<li style="background-image:url(/images/slides/1.jpg);">
                        <div class="overlay"></div>
                        <div class="content">

                        </div>
                    </li>*@
            </ul>
        </div>
    </section>
    <!-- Slider End -->
    <section class="service-v1">
        <div class="container">

            <div class="row">
                <div class="col-md-12">
                    <div class="wp-title_content" style="border-color: transparent; border-width: 0px; height: 51px;margin-top: 173px;">
                        <div style="text-align: center;">
                            <span style="color: rgb(255, 255, 255); font-family: 微软雅黑; font-size: 29px;">
                                <strong>源于美国 国际品牌</strong>
                            </span>
                        </div>
                    </div>
                    <div class="wp-title_content" style="margin-top: 20px; border-color: rgb(218, 36, 24) transparent transparent; border-width: 4px 0px 0px; height: 7px; width: 50px;  border-style: solid;">&nbsp; &nbsp; &nbsp;</div>
                    <div class="wp-title_content" style="margin-top: 30px;border-color: transparent; border-width: 0px;">
                        <div style="text-align: center;">
                            <span style="color: rgb(255, 255, 255); font-family: 微软雅黑; line-height: 180%; font-size: 14px;">
                                MERRYSTONE录属美国MIDAMAR集团下属Pyramid Industry LLC的建材品牌。<br />
                                Pyramid Industry LLC致力于新型建筑材料的研发与制造，并为客户提供系统的解决方案及全面的技术支持
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" style="margin-top: 50px;">
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 itembox border" style="">
                    <a href="javascript:void(0);" class="imgbox">
                        <p class="phbox">
                            <img class="img_lazy_load phfront" data-original="/images/icon00/hourse.png" src="/images/icon00/hourse.png" alt="" style="display: block; overflow: hidden; height: 37px; top: 0px;">
                            <img class="phback" src="/images/icon00/hourse.png" alt="" style="height: 0px; top: 34px;">
                        </p>
                    </a>
                    <a class="btnarea button_btndefault-link">
                        <span class="button_btndefault-label">美国知名品牌</span>
                    </a>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 itembox border">
                    <a class="imgbox">
                        <p class="phbox">
                            <img class="img_lazy_load phfront" data-original="/images/icon00/qi.png" src="/images/icon00/qi.png" alt="" style="display: block; overflow: hidden; height: 37px; top: 0px;">
                            <img class="phback" src="/images/icon00/qi.png" alt="" style="height: 0px; top: 34px;">
                        </p>
                    </a>
                    <a class="btnarea button_btndefault-link ">
                        <span class="button_btndefault-label">美国施工技术</span>
                    </a>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 itembox border">
                    <a class="imgbox">
                        <p class="phbox">
                            <img class="img_lazy_load phfront" data-original="/images/icon00/ren.png" src="/images/icon00/ren.png" alt="" style="display: block; overflow: hidden; height: 37px; top: 0px;">
                            <img class="phback" src="/images/icon00/ren.png" alt="" style="height: 0px; top: 34px;">
                        </p>
                    </a>
                    <a class="btnarea button_btndefault-link">
                        <span class="button_btndefault-label">专业施工队伍</span>
                    </a>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 itembox">
                    <a class="imgbox">
                        <p class="phbox">
                            <img class="img_lazy_load phfront" data-original="/images/icon00/20180717200504.png" src="/images/icon00/20180717200504.png" alt="" style="display: block; overflow: hidden; height: 37px; top: 0px;">
                            <img class="phback" src="/images/icon00/20180717200504.png" alt="" style="height: 0px; top: 34px;">
                        </p>
                    </a>
                    <a class="btnarea button_btndefault-link">
                        <span class="button_btndefault-label">权威工程验收</span>
                    </a>
                </div>
            </div>
        </div>
    </section>
    <section class="products">
        <div class="container">

            <div class="row">
                <div class="col-md-12">
                    <div class="wp-title_content" style="border-color: transparent; border-width: 0px; height: 51px;margin-top: 80px;">
                        <div style="text-align: center;">
                            <span style="color: rgb(67, 67, 67); font-family: 微软雅黑; font-size: 29px;">
                                <strong>产品中心</strong>
                            </span>
                        </div>
                    </div>
                    <div class="wp-title_content" style="margin-top: 20px; border-color: rgb(218, 36, 24) transparent transparent; border-width: 4px 0px 0px; height: 7px; width: 50px;  border-style: solid;">&nbsp; &nbsp; &nbsp;</div>
                </div>
            </div>
            <div class="row" style="margin-top: 50px;">
                <ul class="navigation">
                    @if (categoryDtos != null && categoryDtos.Any())
                    {
                        for (int i = 0; i < categoryDtos.Count(); i++)
                        {
                            <li style="z-index:2;" class="wp_subtop @(i==0?"active":"")" pid="1" data-id="@categoryDtos[i].Id"><a class="" href="@Url.Action("Index","Product",new { id=categoryDtos[i].Id})">@categoryDtos[i].Name</a></li>
                        }
                    }
                    @*<li style="z-index:2;" class="wp_subtop" pid="1"><a class="" href="http://security-308.view.sitestar.cn/page10?product_category=1&amp;brd=1" style="">监控系统</a></li>
                        <li style="z-index:2;" class="wp_subtop" pid="2"><a class="" href="http://security-308.view.sitestar.cn/page10?product_category=2&amp;brd=1" style="">报警系统</a></li>
                        <li style="z-index:2;" class="wp_subtop" pid="3"><a class="" href="http://security-308.view.sitestar.cn/page10?product_category=3&amp;brd=1" style="">门禁系统</a></li>
                        <li style="z-index:2;" class="wp_subtop" pid="4"><a class="" href="http://security-308.view.sitestar.cn/page10?product_category=4&amp;brd=1" style="">集团系统</a></li>
                        <li style="z-index:2;" class="wp_subtop" pid="5"><a class="" href="http://security-308.view.sitestar.cn/page10?product_category=5&amp;brd=1" style="">消防系统</a></li>
                        <li style="z-index: 2; border-right: none;" class="wp_subtop" pid="6"><a class="" href="http://security-308.view.sitestar.cn/page10?product_category=6&amp;brd=1" style="">智能交通</a></li>*@
                </ul>
            </div>
            <div class="row product-list" id="products">
                @foreach (CategoryDto item in categoryDtos)
                {
                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6 item">
                        <a class="aeffect" href="@Url.Action("Index","Product",new { id=item.Id})">
                            <img src="@item.Thumbnail" class="img_lazy_load" />
                        </a>
                        <a class="title" href="@Url.Action("Index","Product",new { id=item.Id})">@item.Name</a>
                    </div>

                }


            </div>
            @*<div class="row product-list">
                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6 item">
                        <a class="aeffect">
                            <img src="http://security-1010808.hkpic1.websiteonline.cn/upload/f8.jpg" class="img_lazy_load" />
                        </a>
                        <a class="title">耐磨固化系统</a>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6 item">
                        <a class="aeffect">
                            <img src="http://security-1010808.hkpic1.websiteonline.cn/upload/f8.jpg" class="img_lazy_load" />
                        </a>
                        <a class="title">耐磨固化系统</a>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6 item">
                        <a class="aeffect">
                            <img src="http://security-1010808.hkpic1.websiteonline.cn/upload/f8.jpg" class="img_lazy_load" />
                        </a>
                        <a class="title">耐磨固化系统</a>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6 item">
                        <a class="aeffect">
                            <img src="http://security-1010808.hkpic1.websiteonline.cn/upload/f8.jpg" class="img_lazy_load" />
                        </a>
                        <a class="title">耐磨固化系统</a>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6 item">
                        <a class="aeffect">
                            <img src="http://security-1010808.hkpic1.websiteonline.cn/upload/f8.jpg" class="img_lazy_load" />
                        </a>
                        <a class="title">耐磨固化系统</a>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6 item">
                        <a class="aeffect">
                            <img src="http://security-1010808.hkpic1.websiteonline.cn/upload/f8.jpg" class="img_lazy_load" />
                        </a>
                        <a class="title">耐磨固化系统</a>
                    </div>
                </div>*@
        </div>
    </section>
    <section class="about hidden-sm hidden-xs">
        <div class="container" style="position:relative;padding-left:0;padding-right:0;" >
            <div id="layerAC478E65772D0C0A49B074889ECD696A" class="full_column" style="width:1200px;position:absolute;height:638px;z-index:107;">
                <div class="full_width" style="position: absolute; height: 638px; background-color: rgb(247, 247, 247); background-position: center center; background-repeat: no-repeat; background-image: url('/images/B-06.jpg'); left: 0px; width: 1200px;">		    </div>
                <div class="full_content" style="width:1200px; position:absolute;left:0;top:0;margin-left: 0px;height:638px;">
                    <div id="layer907E9CC34D523071A4F9338712184E1D" type="title" class="cstlayer" style="left: 576px; top: 128px; position: absolute; z-index: 101; width: 50px; height: 11px;" mid="" fatherid="layerAC478E65772D0C0A49B074889ECD696A" deg="0">
                        <div class="wp-title_content" style="word-wrap: break-word; padding: 0px; border-color: rgb(218, 36, 24) transparent transparent; border-width: 4px 0px 0px; height: 7px; width: 50px; display: block; border-style: solid;">&nbsp; &nbsp; &nbsp;</div>
                    </div>
                    @*<div id="layerFA5B185690142209BB91C806EF1C9B57" type="title" class="cstlayer" style="left: 525px; top: 69px; position: absolute; z-index: 100; width: 150px; height: 51px;" mid="" fatherid="layerAC478E65772D0C0A49B074889ECD696A" deg="0">
                            <div class="wp-title_content" style="word-wrap: break-word; padding: 0px; border-color: transparent; border-width: 0px; height: 51px; width: 150px; display: block;"><div style="text-align: center;"><span style="color: rgb(67, 67, 67); font-family: 微软雅黑; font-size: 29px;"><strong>产品中心</strong></span></div></div>
                        </div>*@
                    <div id="layer0BDDF66974005BFF9A059E11DC8CC7E2" class="full_column" fatherid="layerAC478E65772D0C0A49B074889ECD696A" style="width:1200px;position:absolute;top:0px;height:638px;z-index:102;">
                        <div class="full_width" style="position: absolute; height: 638px; background-color: transparent; background-position: center center; background-repeat: no-repeat; background-image: url(&quot;http://security-1010808.hkpic1.websiteonline.cn/upload/introduce_red.png&quot;); left: 0px; width: 1200px;">		    </div>
                        <div class="full_content" style="width:1200px; position:absolute;left:0;top:0;margin-left: 10px;;height:638px;">
                            <div id="layerB94832198E2BEA905EE8FF63A6D3C484" type="title" class="cstlayer" style="left: 576px; top: 128px; position: absolute; z-index: 101; width: 50px; height: 11px;" mid="" fatherid="layer0BDDF66974005BFF9A059E11DC8CC7E2" deg="0">
                                <div class="wp-title_content" style="word-wrap: break-word; padding: 0px; border-color: rgb(255, 255, 255) transparent transparent; border-width: 4px 0px 0px; height: 7px; width: 50px; display: block; border-style: solid;">&nbsp; &nbsp; &nbsp;</div>
                            </div>
                            <div id="layer26BDD164AAE1ADFFD9EB6882AEDC5A77" type="title" class="cstlayer" style="left: 525px; top: 69px; position: absolute; z-index: 100; width: 150px; height: 51px;" mid="" fatherid="layer0BDDF66974005BFF9A059E11DC8CC7E2" deg="0">
                                <div class="wp-title_content" style="word-wrap: break-word; padding: 0px; border-color: transparent; border-width: 0px; height: 51px; width: 150px; display: block;"><div style="text-align: center;"><font color="#ffffff" face="微软雅黑"><span style="font-size: 29px;"><b>公司简介</b></span></font></div></div>
                            </div>
                            <div id="layer747FE57E0E8F42D138DDD03773216EB1" type="shapes" class="cstlayer" style="left: 552px; top: 198px; position: absolute; z-index: 102; width: 100px; height: 100px; " mid="" fatherid="layer0BDDF66974005BFF9A059E11DC8CC7E2" deg="0">
                                <div class="wp-shapes_content" style="width: 100px; height: 100px; border-width: 0px; border-style: solid; padding: 0px;">
                                    <img src="~/images/kuang.png" width="100" height="100" />
                                </div>
                            </div>
                            <div id="layer6D6EBFB5374262FF627D303BB500E06B" type="title" class="cstlayer" style="left: 570px; top: 224px; position: absolute; z-index: 103; width: 65px; height: 48px;" mid="" fatherid="layer0BDDF66974005BFF9A059E11DC8CC7E2" deg="0">
                                <div class="wp-title_content" style="word-wrap: break-word; padding: 0px; border-color: transparent; border-width: 0px; height: 48px; width: 65px; display: block;"><div style="text-align: center;"><strong style="color: rgb(218, 36, 24); font-family: 微软雅黑; font-size: 24px;"><span style="line-height:200%;">专业</span></strong></div></div>
                            </div>
                            <div id="layerACF789ED97694EB4DEE55269EAC18DB5" type="title" class="cstlayer" style="left: 0px; top: 188px; position: absolute; z-index: 108; width: 477px; height: 293px;" mid="" fatherid="layer0BDDF66974005BFF9A059E11DC8CC7E2" deg="0">
                                <div class="wp-title_content" style="word-wrap: break-word; padding: 0px; border-color: transparent; border-width: 0px; height: 293px; width: 477px; display: block;">
                                    <p>
                                        <span style="font-family: 微软雅黑; font-size: 14px; line-height: 180%; color: rgb(255, 255, 255);">
                                            @*MERRYSTONE隶属美国MIDAMAR集团下属Pyramid Industry LLC
                                                的建材产品品牌。MIDAMAR集团成立于1974年，集团旗下企业涵盖食
                                                品、农业、化工、建材等多个领域。1990年，Midamar集团荣幸地获得
                                                由时任美国总统乔治.布什亲自颁发的美国政府最高奖--“美国总统E星奖”。
                                                Pyramid Industry LLC致力于新型建筑材料的研发与制造，并为客户提
                                                供系统的解决方案及全面的技术支持。*@
                                            @config.Company1

                                        </span>
                                    </p><p><span style="font-family: 微软雅黑; font-size: 14px; line-height: 180%; color: rgb(255, 255, 255);"><br></span></p><p>
                                        <span style="color: rgb(255, 255, 255); font-family: 微软雅黑; font-size: 14px; line-height: 180%;">
                                            @*国际化品牌及行业领先的技术支持使MERRYSTONE在产品质量、技术
                                                和服务方面具备强大的国际竞争力。MERRYSTONE强调系统化创新的
                                                解决方案，满足最基本的人类需求：提升建筑物的价值，创造更加安全环
                                                保的环境。MERRYSTONE坚持产品系统适应客户不断变化的需求，其
                                                产品广泛应用于各种建筑领域，为其提供完善的产品服务及创新设计的系
                                                统解决方案。使MERRYSTONE向行业领导品牌迈进。*@
                                            @config.Company2
                                        </span>
                                    </p>
                                </div>
                            </div>
                            @*<div id="layer4A5CD4574A92184AAFB852EAEAE84872" type="buttons" class="cstlayer" style="left: 0px; top: 500px; position: absolute; z-index: 109; width: 124px; height: 42px;" mid="" fatherid="layer0BDDF66974005BFF9A059E11DC8CC7E2" deg="0">
                                    <div class="wp-buttons_content" style="padding: 0px; border-color: transparent; border-width: 0px; overflow: hidden; width: 124px; height: 42px;">
                                        <a href="http://security-308.view.sitestar.cn/page17" class="btnarea button_btndefault-link" style="width:122px;left:0px;top:0px;height:40px;line-height:40px;">
                                            <span class="button_btndefault-label">了解详情</span>
                                        </a>
                                    </div>
                                </div>*@
                            <div id="layerEC941258BC4A2CB90761D29169369F4C" type="shapes" class="cstlayer" style="left: 552px; top: 330.5px; position: absolute; z-index: 105; width: 100px; height: 100px; " mid="" fatherid="layer0BDDF66974005BFF9A059E11DC8CC7E2" deg="0">
                                <div class="wp-shapes_content" style="width: 100px; height: 100px; border-width: 0px; border-style: solid; padding: 0px;">

                                    <img src="~/images/kuang.png" width="100" height="100" />
                                </div>

                            </div>
                            <div id="layer1F76D435D5A8B83E375D20B0042D79AE" type="title" class="cstlayer" style="left: 569px; top: 362px; position: absolute; z-index: 106; width: 65px; height: 48px;" mid="" fatherid="layer0BDDF66974005BFF9A059E11DC8CC7E2" deg="0">
                                <div class="wp-title_content" style="word-wrap: break-word; padding: 0px; border-color: transparent; border-width: 0px; height: 48px; width: 65px; display: block;"><div style="text-align: center;"><font color="#da2418" face="微软雅黑"><span style="font-size: 24px;"><b>诚信</b></span></font></div></div>
                            </div>
                            <div id="layer4E4463F961A9A41BEF41DB570E831256" type="shapes" class="cstlayer" style="left: 552px; top: 463px; position: absolute; z-index: 107; width: 100px; height: 100px; " mid="" fatherid="layer0BDDF66974005BFF9A059E11DC8CC7E2" deg="0">
                                <div class="wp-shapes_content" style="width: 100px; height: 100px; border-width: 0px; border-style: solid; padding: 0px;">
                                    <img src="~/images/kuang.png" width="100" height="100" />
                                </div>

                            </div>
                            <div id="layer32AD23E72C725953DE16668549EC062E" type="title" class="cstlayer" style="left: 569px; top: 496px; position: absolute; z-index: 108; width: 65px; height: 48px;" mid="" fatherid="layer0BDDF66974005BFF9A059E11DC8CC7E2" deg="0">
                                <div class="wp-title_content" style="word-wrap: break-word; padding: 0px; border-color: transparent; border-width: 0px; height: 48px; width: 65px; display: block;"><div style="text-align: center;"><font color="#da2418" face="微软雅黑"><span style="font-size: 24px;"><b>创新</b></span></font></div></div>
                            </div>

                        </div>
                    </div>


                </div>
            </div>
        </div>
    </section>
    <section class="news hidden-sm hidden-xs">
        <div class="container" style="position:relative">
            <div class="row" style="position:relative">
                <div id="layer70E648775C7F58012587F140846A21B2" type="title" class="cstlayer" style="left: 525px; top: 600px; position: absolute; z-index: 110; width: 150px; height: 51px;" mid="" deg="0">
                    <div class="wp-title_content" style="word-wrap: break-word; padding: 0px; border-color: transparent; border-width: 0px; height: 51px; width: 150px; display: block;"><div style="text-align: center;"><span style="color: rgb(67, 67, 67); font-family: 微软雅黑; font-size: 29px;"><strong>新闻中心</strong></span></div></div>
                </div>
                <div id="layerD4E3E1689444E77EA8CBA985251A7C1C" type="title" class="cstlayer" style="left: 576px; top: 660px; position: absolute; z-index: 111; width: 50px; height: 11px;" mid="" deg="0">
                    <div class="wp-title_content" style="word-wrap: break-word; padding: 0px; border-color: rgb(218, 36, 24) transparent transparent; border-width: 4px 0px 0px; height: 7px; width: 50px; display: block; border-style: solid;">&nbsp; &nbsp; &nbsp;</div>
                </div>
                <div id="layer0EDF9D34AFE3A8BA4B4BF23B1ED32654" class="cstlayer" style="left: 475px; top: 690px; position: absolute; z-index: 108; width: 725px; height: 355px;" mid="" deg="0">

                    <div class="wp-article_content wp-article_list_content" style="border-color: transparent; border-width: 0px; overflow: hidden; width: 725px; height: 355px;">

                        <div skin="skin4" class="wp-article_css wp-article_list_css" style="display:none;">

                        </div>
                        <div class="article_list-layer0EDF9D34AFE3A8BA4B4BF23B1ED32654" style="overflow:hidden;">

                            <ul>
                                @if (news != null && news.Any())
                                {
                                    foreach (NewsDto item in news)
                                    {
                                        <li class="wpart-border-line" style=";padding-top:12px;padding-bottom:12px;">
                                            <div class="time" style="background:#000000;width:80px;height:80px;">
                                                <span class="wp-new-ar-pro-time" id="day" style="line-height：41px;color:#ffffff;font-size:24px;">@item.CreatedOn.ToString("dd")</span>
                                                <span class="date" id="day_ym" style="color:#ffffff;font-size:13px;display:block; ">@item.CreatedOn.ToString("yyyy-MM")</span>
                                            </div>
                                            <div class="conts">
                                                <p class="title"><a class="articleid" articleid="16" href="@Url.Action("Detail",new { id=item.Id})" title="@item.Name">@item.Name</a></p>
                                                <p class="abstract">@item.Content</p>
                                            </div>
                                        </li>
                                        @*<li class="wpart-border-line" style=";padding-top:12px;padding-bottom:12px;">
                                                <div class="time" style="background:#000000;width:80px;height:80px;">
                                                    <span class="wp-new-ar-pro-time" id="day" style="line-height：41px;color:#ffffff;font-size:24px;">29</span>
                                                    <span class="date" id="day_ym" style="color:#ffffff;font-size:13px;display:block; ">2014-09</span>
                                                </div>
                                                <div class="conts">
                                                    <p class="title"><a class="articleid" articleid="16" href="&#10;&#9;http://security-308.view.sitestar.cn/page15?article_id=16&#9;&#10;&#9;" title="我公司推出专用看车牌白光摄像机">我公司推出专用看车牌白光摄像机</a></p>
                                                    <p class="abstract">其具体型号和参数见产品分类&nbsp;XS-81LB系列。此种摄像机完全采用SONY方案设计、机芯在台湾生产，独特的DSP&nbsp;强光抑制功能能应用于所有门闸处。其具体型号和参数见产品分类&nbsp;&nbsp;XS-81LB系列。&nbsp;&nbsp;</p>
                                                </div>
                                                <input type="hidden" class="articleid" data-title="我公司推出专用看车牌白光摄像机">
                                                <input type="hidden" class="abstract" data-desc="其具体型号和参数见产品分类 XS-81LB系列。此种摄像机完全采用SONY方案设计、机芯在台湾生产，独特的DSP 强光抑制功能能应用于所有门闸处。其具体型号和参数见产品分类  XS-81LB系列。  ">
                                            </li>*@
                                    }

                                }

                                @*<li class="wpart-border-line" style=";padding-top:12px;padding-bottom:12px;">
                                        <div class="time" style="background:#000000;width:80px;height:80px;">
                                            <span class="wp-new-ar-pro-time" id="day" style="line-height：41px;color:#ffffff;font-size:24px;">29</span>
                                            <span class="date" id="day_ym" style="color:#ffffff;font-size:13px;display:block; ">2014-09</span>
                                        </div>
                                        <div class="conts">
                                            <p class="title"><a class="articleid" articleid="23" href="&#10;&#9;http://security-308.view.sitestar.cn/page15?article_id=23&#9;&#10;&#9;" title="上海监控探头重要路段全覆盖">上海监控探头重要路段全覆盖</a></p>
                                            <p class="abstract">上海警方在路面监控系统建设上投入重金，各级公安机关在辖区重点路段、场所都安装了监控系统，为及时发现和打击路面犯罪提供了有力的技术支撑。</p>
                                        </div>
                                        <input type="hidden" class="articleid" data-title="上海监控探头重要路段全覆盖">
                                        <input type="hidden" class="abstract" data-desc="上海警方在路面监控系统建设上投入重金，各级公安机关在辖区重点路段、场所都安装了监控系统，为及时发现和打击路面犯罪提供了有力的技术支撑。">
                                    </li>
                                    <li class="wpart-border-line" style=";padding-top:12px;padding-bottom:12px;">
                                        <div class="time" style="background:#000000;width:80px;height:80px;">
                                            <span class="wp-new-ar-pro-time" id="day" style="line-height：41px;color:#ffffff;font-size:24px;">29</span>
                                            <span class="date" id="day_ym" style="color:#ffffff;font-size:13px;display:block; ">2014-09</span>
                                        </div>
                                        <div class="conts">
                                            <p class="title"><a class="articleid" articleid="22" href="&#10;&#9;http://security-308.view.sitestar.cn/page15?article_id=22&#9;&#10;&#9;" title="轨交世博车站拟装新安保设施 人脸识别器自动报">轨交世博车站拟装新安保设施 人脸识别器自动报</a></p>
                                            <p class="abstract">一旦通缉犯经过，人脸识别仪会立即“捕捉”并报警，这种新型安保设施有望安装在世博园区所涉及的轨交车站。据有关方面透露，包括人脸识别、气体检测、辐射检测在内多种新型安保设施正在研究中，将用来保护世博会期间的轨道交通线路安全畅通。</p>
                                        </div>
                                        <input type="hidden" class="articleid" data-title="轨交世博车站拟装新安保设施 人脸识别器自动报">
                                        <input type="hidden" class="abstract" data-desc="一旦通缉犯经过，人脸识别仪会立即“捕捉”并报警，这种新型安保设施有望安装在世博园区所涉及的轨交车站。据有关方面透露，包括人脸识别、气体检测、辐射检测在内多种新型安保设施正在研究中，将用来保护世博会期间的轨道交通线路安全畅通。">
                                    </li>*@
                            </ul>

                        </div>
                        <div class="article_list_save_itemList" opencategoryurl="0" openmoreurl="0" opendetailurl="0" pagerstyle="default/skin1" pagernum="每页显示文章数" pageralign="right" morealign="left" showpager="0" articlecategroies="4,1,2,3" articletags="" linkcategoryurl="14" linkmoreurl="14" isshowmore="No" isshowmorecn="No" linkdetailurl="15" isshowdots="No" introwordnum="150" titlewordnum="30" listnum="3" sorttype="default" sortvalue="desc" articlestyle="skin4" getparamcategoryid="empty" imgwnode="130" imghnode="90" imgtnode="Tile" memberartshow="off" pageskip="1" pageop="0" pagepar="p_article_list" style="display:none;"></div>
                    </div>
                </div>
                <div id="layer26B1E350ED70F501FDE14E05056AA2ED" type="mixslider" class="cstlayer" style="left: 0px; top: 713px; position: absolute; z-index: 109; width: 440px; height: 325px;" mid="" deg="0">
                    <div class="mF_ladyQ_wrap">
                        <div id="layer26B1E350ED70F501FDE14E05056AA2EDmyFocus" class=" mF_ladyQ mF_ladyQ_layer26B1E350ED70F501FDE14E05056AA2EDmyFocus" style="height: 353px;">

                            <div class="pic">
                                <ul>
                                    <li style="display: block;"><a href="javascript:void(0);"><img src="~/images/10.jpg" thumb="" class="imgclass" alt="" text=""></a></li>

                                    @*<li style="display: block;"><a href="javascript:void(0);"><img src="http://security-1010808.hkpic1.websiteonline.cn/upload/focus_02.jpg" thumb="" class="imgclass" alt="" text=""></a></li>

                                        <li style="display: none;"><a href="javascript:void(0);"><img src="http://security-1010808.hkpic1.websiteonline.cn/upload/focus_03.jpg" thumb="" class="imgclass" alt="" text=""></a></li>*@


                                </ul>
                            </div>
                            @*<div class="txt">
                                    <ul>
                                        <li class="" style="bottom: 56px;">
                                            <a href="javascript:void(0);" onclick="setjslider_link('','')"></a>
                                            <p></p><b></b>
                                        </li>
                                        <li class="current" style="bottom: 56px;"><a href="javascript:void(0);" onclick="setjslider_link('','')"></a><p></p><b></b></li>
                                        <li class="" style="bottom: 56px;">
                                            <a href="javascript:void(0);" onclick="setjslider_link('','')"></a>
                                            <p>
                                            </p><b></b>
                                        </li>
                                    </ul>
                                </div>*@
                            @*<div class="num">
                                    <ul>
                                        <li class=""><a>1</a><b></b></li>
                                        <li class="current"><a>2</a><b></b></li>
                                        <li class=""><a>3</a><b></b></li>
                                    </ul>
                                </div>*@
                            <div class="time_bar" style="top: 329px; width: 365px; display: none;"></div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </section>
    <section class="customers hidden-sm hidden-xs">
        <div class="container" style="position:relative">
            <div class="row" style="position:relative">
                <div id="layer70E648775C7F58012587F140846A21B2" type="title" class="cstlayer" style="left: 525px; top: 1102px; position: absolute; z-index: 110; width: 150px; height: 51px;" mid="" deg="0">
                    <div class="wp-title_content" style="word-wrap: break-word; padding: 0px; border-color: transparent; border-width: 0px; height: 51px; width: 150px; display: block;">
                        <div style="text-align: center;">
                            <span style="color: rgb(67, 67, 67); font-family: 微软雅黑; font-size: 29px;"><strong>服务客户</strong></span>
                        </div>
                    </div>
                </div>
                <div id="layerD4E3E1689444E77EA8CBA985251A7C1C" type="title" class="cstlayer" style="left: 576px; top: 1162px; position: absolute; z-index: 111; width: 50px; height: 11px;" mid="" deg="0">
                    <div class="wp-title_content" style="word-wrap: break-word; padding: 0px; border-color: rgb(218, 36, 24) transparent transparent; border-width: 4px 0px 0px; height: 7px; width: 50px; display: block; border-style: solid;">&nbsp; &nbsp; &nbsp;</div>
                </div>
                <div id="layer4A4C40991F8126B88A7F3C0BCB515068" type="picture_hover" class="cstlayer" style="left: 0px; top: 1200px; position: absolute; z-index: 102; width: 1200px; height: 299px;" mid="" fatherid="layer1F0F6735920DD57B7EC5FE6895973038" deg="0">
                    <div class="wp-picture_hover_content" style="overflow: hidden; border-color: transparent; border-width: 0px; width: 1200px; height: 299px;">
                        <div class="st-slidecontent" id="layer4A4C40991F8126B88A7F3C0BCB515068_stslider">

                            <div class="main-pichover-content layer4A4C40991F8126B88A7F3C0BCB515068">
                                @if (customers != null && customers.Any())
                                {
                                    foreach (CustomerDto item in customers)
                                    {
                                        <div class="worksbox" id="worksbox0">
                                            <a>
                                                <p class="phbox">
                                                    <img class="img_lazy_load phfront" src="@item.Thumbnail" alt="" style="display: block;">
                                                </p>
                                            </a>
                                        </div>
                                    }

                                }
                                @*@for (int i = 11; i <= 28; i++)
        {
            <div class="worksbox" id="worksbox0">
                <a href="javascript:void(0);">
                    <p class="phbox">
                        <img class="img_lazy_load phfront" src="@string.Format("/images/customers/{0}.jpg",i)" alt="" style="display: block;">
                    </p>
                </a>
            </div>

        }*@
                            </div>

                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>
    <section class="footer hidden-sm hidden-xs" style="position:relative;">
        <div id="site_footer" style="    width: 100%;
    position: absolute;
    padding-top: 15px;
    left: 0px;
    top: 1495px;
    height: 220px;
    background-color: #cd3c32;">
            <div class="full_width" style="margin:0 auto;   width: 11700px;"></div>
            <div id="footer_content" class="full_content">
               
                <div id="layerA150DDB02D95EA5F5763FEABB9330B92" inbuttom="1" class="cstlayer" style=" top: 113px; margin:0 auto; z-index: 101; width: 877px; height: 83px;" mid="" deg="0">
                    <div class="wp-title_content" style="word-wrap: break-word; padding: 0px; border-color: transparent; border-width: 0px; height: 83px; width: 877px; border-style: solid; display: block;">
                        <div style="text-align:center">
                            <img src="~/images/001.png" />
                        </div>
                        <div style="text-align: center;">
                            <span style="font-family: 微软雅黑; font-size: 14px; line-height: 180%; color: #fff;">@config.Company</span>
                        </div>
                        <div style="text-align: center;">
                            <span style="font-family: 微软雅黑; font-size: 14px; line-height: 180%; color:#fff;">地址：@config.Address</span>
                        </div>
                        <div style="text-align: center;">
                            <span style="font-family: 微软雅黑; font-size: 14px; line-height: 180%; color: #fff;">
                                @config.LinkContent
                            </span>
                        </div>
                        <div style="text-align: center; "><span style="font-family: 微软雅黑; font-size: 14px; line-height: 180%; color: #fff;">Copyright© 2018 @config.ComyName 版权所有 @config.CodeNumber</span></div>
                    </div>
                </div>

            </div>
        </div>
    </section>
    @*<section class="footer hidden-sm hidden-xs" style="position:relative;">
            <div id="site_footer" style="    width: 100%;
        position: absolute;
        padding-top: 45px;
        left: 0px;
        top: 1495px;
        height: 220px;
        background-color: #cd3c32;">
                <div class="full_width" style="margin:0 auto;   width: 11700px;"></div>
                <div id="footer_content" class="full_content" ">
                    <div id="layerA150DDB02D95EA5F5763FEABB9330B92" inbuttom="1" class="cstlayer" style=" top: 113px; margin:0 auto; z-index: 101; width: 877px; height: 83px;" mid="" deg="0">
                        <div class="wp-title_content" style="word-wrap: break-word; padding: 0px; border-color: transparent; border-width: 0px; height: 83px; width: 877px; border-style: solid; display: block;">
                            <div style="text-align: center;">
                                <span style="font-family: 微软雅黑; font-size: 14px; line-height: 180%; color: #fff;">东莞市派瑞美建筑科技有限公司(中国区总运营商)</span>
                            </div>
                            <div style="text-align: center;">
                                <span style="font-family: 微软雅黑; font-size: 14px; line-height: 180%; color:#fff;">地址：东莞市松山湖高新技术产业开发区科技十路7号</span>
                            </div>
                            <div style="text-align: center;">
                                <span style="font-family: 微软雅黑; font-size: 14px; line-height: 180%; color: #fff;">
                                    全国免费服务热线： 400-153-1615
                                    （USA）PYRAMID INDUSTRY, LLC        Address：C/O9-29th Avenue, SW. Cedar Rapids, Iowa,52404 USA           U S Tel：+1-319 654 4139
                                    （UAE）PYRAMID INDUSTRY, LLC        Address： P.O. Box:72714, Jumeirah, Dubai, U.A.E
                                    （Australia）NAUTA ENTERPRISES PTY LTD.                  Address： 9 Grosvenor Court, Worongary, QLD4213, Australia
                                </span>
                            </div>
                            <div style="text-align: center; "><span style="font-family: 微软雅黑; font-size: 14px; line-height: 180%; color: #fff;">Copyright© 2018 东莞市斯博锐高分子建筑材料科技有限公司 版权所有 </span></div>
                        </div>
                    </div>

                </div>
            </div>
        </section>*@
    @*<environment include="Development">
            <script src="~/lib/jquery/dist/jquery.js"></script>
            <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
            <script src="~/js/site.js" asp-append-version="true"></script>
        </environment>
        <environment exclude="Development">
            <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"
                    asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                    asp-fallback-test="window.jQuery"
                    crossorigin="anonymous"
                    integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT">
            </script>
            <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
                    asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
                    asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                    crossorigin="anonymous"
                    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
            </script>
            <script src="~/js/site.min.js" asp-append-version="true"></script>
        </environment>*@
    <script src="/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    <script src="~/js/jquery.bxslider.min.js"></script>
    @*<script language="javascript">
            $(function () {
                var layerid = 'layer26B1E350ED70F501FDE14E05056AA2ED', $curlayer = $('#' + layerid);
                setTimeout(function () {
                    $curlayer.find('#layer26B1E350ED70F501FDE14E05056AA2ED_frmlofjslider').attr("src", "http://security-308.view.sitestar.cn/index.php?_lid=layer26B1E350ED70F501FDE14E05056AA2ED&_m=mixslider&_a=loadskin&width=" + $curlayer.find('.wp-mixslider_content').width() + "&height=" + $curlayer.find('.wp-mixslider_content').height());
                    $curlayer.find('.mod_mask').css({ "width": $curlayer.width(), "height": $curlayer.height() });
                }, 20);
                setTimeout(function () {
                    var pattern = 'mF_ladyQ';
                    if (pattern == 'mF_ladyQ') {
                        var $num = $("#layer26B1E350ED70F501FDE14E05056AA2ED_frmlofjslider").contents().find(".num");
                        // 			if($num.length > 0){$num.hide();}
                    }
                }, 1000);
            });
        </script>*@

    <script type="text/javascript">
        $('.bxslider').bxSlider({
            auto: true,
            pager: false,
            speed: 500,
            pause: 6000,
            easing: 'ease-in-out'
        });
         $('.wp_subtop').click(function () {
                var $this = $(this);
                $this.addClass('active').siblings().removeClass('active');
                $.post('@Url.Action("Data")', { id: $this.data('id') }, function (data) {
                    if (data && data.length > 0) {
                        var html = '';

                        for (var i = 0; i < data.length; i++) {
                            html += '<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6 item">'
                                +' <a class="aeffect"><img src="'+data[i].thumbnail+'" class="img_lazy_load" /></a>'
                                + '<a class="title" href="@Url.Action("Detail","Product")' + '?id=' + data[i].id + '">' + data[i].name+'</a></div>';

                        }
                        $('#products').empty().append(html);
                    }
                });
            });
    </script>
</body>

</html>
